<title>SC注册</title>
<link rel="icon" href="./../img/logo.png">
<style>
	body{
		margin: 0;
		background-image: url(../img/zhuce.jpg);
	}
	
	.home{
		width: 100%;
		height: 100%;
		background-image: url(../img/zhuce.jpg);
		
	}
	.zc{
		background-color: rgba(36,75,116, 0.5);
		color: #ffffff;
		border-radius: 5px;
		box-shadow:0 0 2px #000 inset;
		position: absolute;
		margin-left: 720px;
		margin-top: 150px;
		height: 400px;
		width: 500px;
	}
	.text{
		color: #ffffff;
		margin-left: 120px;
	}
	.user{
		width: 100px;
		height: 20px;
	}
	.shuru{
		margin: 20px 120px;
		width: 100px;
		text-align: center;
	}
	.t {
		background-color: #4E495D;
		  width:240px;;
		  height: 45px;
		  border-radius: 8px;
		  margin-bottom: 20px;
		  padding: 0 16px;
		  font-size: 18px;
		  color: #c4c3ca;
		  font-weight: 500;
		  outline: none;
		  border: none;
		  box-shadow: 0 4px 8px 0 rgba(78, 73, 79, .5);
		  transform-style: preserve-3d;
		  transform: translate3d(0, 0, 1px);
	}
	
	.container{
		width: 100px;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-top: -20px;
		margin-left: 190px;
	}
	#rec{
		fill:transparent;
		stroke:tomato;
		stroke-width: 12px;
		/* 设置按钮下面的粗边框 */
		stroke-dasharray: 100 500;
		stroke-dashoffset: 230;
	}
	.btn{
		position: relative;
		/* 为其设置宽度和高度的原因是  其hover的范围只应该是按钮矩形那么大 */
		/* 将nav盒子放在其中也不会消失，只是会在盒子外，之所以将nav放在btn中，是因为方便设置其top值 */
		width: 240px;
		height: 60px;
	}
	.nav{
		font-size: 23px;
		position: relative;
		top:-50px;
		letter-spacing: 6px;
	}
	@keyframes move{
		to{
			stroke-width: 4px;
			stroke-dasharray: 600;
			stroke-dashoffset: 0;
		}
	}
	/* 想想为啥是hover之后加了#rec   是因为鼠标放到按钮框上之后要看到rect的变化 */
	.btn:hover #rec{
		animation: move 0.8s linear forwards;
	}
	.an{
		width: 235px;
		height: 50px;
		background-image: url(../img/kong.jpg);
		margin-top: -5px;
		border: 0;
	}
	a{
		text-decoration: none;
	}
</style>
<body >
<div class="home">
<div class="zc">
<form name="form2" method="post" action="">
	<div class="shuru">
		<input type="text" name="user" class="t" placeholder="用户名"/>
		<br/>
		<input type="password" name="password" class="t" placeholder="密码"/>
		<br />
		<input type="text" name="email" class="t" placeholder="E-mail:"/>
	</div>
	<div class="container">
		<div class="btn">
			<svg width="240" height="60">
				<rect width="240" height="60" id="rec"/>
			</svg>
			<div class="nav">
				<input type="submit" name="reg" value="注册" class="an"/>
			</div>
		</div>
	</div>
</form>
<a href="login.php" class="text">返回首页</a>&nbsp;
<a href="login.php" class="text">登陆</a>
<?php

	if(isset($_POST['reg'])){
		if(!empty($_POST['user'])&&!empty($_POST['password'])){
		    $conn=mysqli_connect("localhost","root","10a5c81626ac5ee2","user") or die("数据库链接失败！");
			$sql="select * from user where username='".$_POST['user']."'";
			$result=mysqli_query($conn,$sql);
			$rownum=mysqli_num_rows($result);
			$rr=mysqli_fetch_array($result);
			
			/*$query=mysql_query($sql);
			$rr=mysql_fetch_array($query);*/
			
			if($rr['username']!=$_POST['user']){
				$sql="INSERT INTO user(id,username,pwd,email)VALUES(
				NULL,
				'".$_POST['user']."',
				'".md5($_POST['password'])."',
				'".$_POST['email']."'
				);";
				$state=mysqli_query($conn,$sql);
				if($state){
					setcookie("username",$_POST['user']);
					setcookie("code",md5($_POST['user'].md5($_POST['password'])));
					echo"<script>alert('注册成功！');window.location.href='login.php'</script>";
				}
			}else{
				echo "<script>alert('用户名已存在');</script>";
			}
		}else{
			echo "<script>alert('用户名或密码不能为空');</script>";
		}
	}
?>
</div>
</div>
</body>